<template>
  <div class="box-card">
    <div class="border-t"></div>
    <div class="border-b"></div>
    <div class="border-l"></div>
    <div class="border-r"></div>
    <div class="angle lt"></div>
    <div class="angle rt"></div>
    <div class="angle rb"></div>
    <div class="angle lb"></div>
    <slot></slot>
  </div>
</template>

<script setup></script>

<style scoepd lang="less">
  .box-card {
    position: relative;
    .border-t {
      width: 100%;
      height: 1px;
      background: linear-gradient(270deg, rgba(4, 122, 255, 0.05), #047aff);
      position: absolute;
      top: 0;
      left: 0;
    }
    .border-b {
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, rgba(4, 122, 255, 0.05), #047aff);
      position: absolute;
      bottom: 0;
      left: 0;
    }
    .border-l {
      width: 1px;
      height: 100%;
      background: linear-gradient(180deg, rgba(4, 122, 255, 0.05), #047aff);
      position: absolute;
      top: 0;
      right: 0;
    }
    .border-r {
      width: 1px;
      height: 100%;
      background: linear-gradient(180deg, rgba(4, 122, 255, 0.05), #047aff);
      position: absolute;
      top: 0;
      left: 0;
    }
    .angle {
      height: 24px;
      width: 24px;
      border-top: 2px solid #047aff;
      border-left: 2px solid #047aff;
      position: absolute;
    }
    .lt {
      left: 0;
      top: 0;
    }
    .rt {
      right: 0;
      top: 0;
      transform: rotate(90deg);
    }
    .rb {
      right: 0;
      bottom: 0;
      transform: rotate(180deg);
    }
    .lb {
      left: 0;
      bottom: 0;
      transform: rotate(-90deg);
    }
  }
</style>
